<template>
    <div class="h-screen bg-gray-50">
      <!-- 顶部导航栏 - 添加点击事件 -->
      <div class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50">
        <div class="max-w-7xl mx-auto px-4 h-16 flex items-center">
          <button @click="goBack" class="!rounded-button mr-4 hover:bg-gray-100 transition-colors">
            <i class="fas fa-arrow-left text-gray-600"></i>
          </button>
          <h1 class="text-xl font-medium">系统设置</h1>
        </div>
      </div>

      <!-- 主要内容区域 - 添加过渡动画 -->
      <div class="max-w-7xl mx-auto px-4 pt-20 pb-8 overflow-y-auto transition-all duration-200">
        <!-- 用户信息模块 - 添加点击事件 -->
        <div class="bg-white rounded-lg shadow-sm mb-6 overflow-hidden">
          <div class="px-6 py-4 border-b border-gray-100">
            <h2 class="text-lg font-medium">用户信息</h2>
          </div>
          
          <div class="divide-y divide-gray-100">
            <div @click="editAvatar" class="flex items-center px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors">
              <span class="flex-1">头像</span>
              <div class="flex items-center">
                <img :src="userAvatar || defaultAvatar" alt="用户头像" class="w-10 h-10 rounded-full object-cover border border-gray-200"/>
                <i class="fas fa-chevron-right ml-4 text-gray-400"></i>
              </div>
            </div>
            
            <!-- 其他用户信息项添加点击事件 -->
            <div @click="editUsername" class="flex items-center px-6 py-4 hover:bg-gray-50 cursor-pointer transition-colors">
              <span class="flex-1">用户名</span>
              <div class="flex items-center">
                <span class="text-gray-600">{{ userName }}</span>
                <i class="fas fa-chevron-right ml-4 text-gray-400"></i>
              </div>
            </div>
  
            <div class="flex items-center px-6 py-4 hover:bg-gray-50 cursor-pointer">
              <span class="flex-1">手机号码</span>
              <div class="flex items-center">
                <span class="text-gray-600">{{ phoneNumber }}</span>
                <i class="fas fa-chevron-right ml-4 text-gray-400"></i>
              </div>
            </div>
  
            <div class="flex items-center px-6 py-4 hover:bg-gray-50 cursor-pointer">
              <span class="flex-1">邮箱账号</span>
              <div class="flex items-center">
                <span class="text-gray-600">{{ email }}</span>
                <i class="fas fa-chevron-right ml-4 text-gray-400"></i>
              </div>
            </div>
          </div>
        </div>
  
        <!-- 通知设置模块 -->
        <div class="bg-white rounded-lg shadow-sm overflow-hidden">
          <div class="px-6 py-4 border-b border-gray-100">
            <h2 class="text-lg font-medium">通知设置</h2>
          </div>
  
          <div class="divide-y divide-gray-100">
            <div class="flex items-center px-6 py-4">
              <div class="flex-1">
                <div>推送通知</div>
                <div class="text-sm text-gray-500 mt-1">接收重要消息和活动提醒</div>
              </div>
              <label class="toggle-switch">
                <input type="checkbox" v-model="notificationSettings.push">
                <span class="toggle-slider"></span>
              </label>
            </div>
  
            <div class="flex items-center px-6 py-4">
              <div class="flex-1">
                <div>声音提醒</div>
                <div class="text-sm text-gray-500 mt-1">新消息时播放提示音</div>
              </div>
              <label class="toggle-switch">
                <input type="checkbox" v-model="notificationSettings.sound">
                <span class="toggle-slider"></span>
              </label>
            </div>
  
            <div class="flex items-center px-6 py-4">
              <div class="flex-1">
                <div>震动提醒</div>
                <div class="text-sm text-gray-500 mt-1">新消息时手机震动</div>
              </div>
              <label class="toggle-switch">
                <input type="checkbox" v-model="notificationSettings.vibration">
                <span class="toggle-slider"></span>
              </label>
            </div>
  
            <div class="flex items-center px-6 py-4 hover:bg-gray-50 cursor-pointer">
              <div class="flex-1">
                <div>通知显示方式</div>
                <div class="text-sm text-gray-500 mt-1">选择通知在屏幕上的显示方式</div>
              </div>
              <div class="flex items-center">
                <span class="text-gray-600">{{ notificationSettings.displayMode }}</span>
                <i class="fas fa-chevron-right ml-4 text-gray-400"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 信息
const defaultAvatar = '';
const userAvatar = ref('');
const userName = ref('admin');
const phoneNumber = ref('138 **** 5678');
const email = ref('admin@example.com');

const notificationSettings = ref({
  push: true,
  sound: true,
  vibration: false,
  displayMode: '横幅通知'
});

// 添加方法
const goBack = () => {
  router.go(-1);
};

const editAvatar = () => {
  // 实现头像编辑逻辑
  console.log('编辑头像');
};

const editUsername = () => {
  // 实现用户名编辑逻辑
  console.log('编辑用户名');
};
</script>

<style scoped>
/* 添加动画效果 */
.transition-colors {
  transition: background-color 0.2s ease;
}
.peer:checked ~ .peer-checked\:after\:translate-x-full:after {
  transform: translateX(100%);
}

/* 优化滚动条样式 */
.overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 9999px;
}

/* 响应式设计 */
@media (max-width: 640px) {
  .max-w-7xl {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
/* 替代切换按钮样式 */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e5e7eb;
  transition: .4s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: #2563eb;
}

input:checked + .toggle-slider:before {
  transform: translateX(20px);
}
</style>
  